<template>
<div class="mask" v-show="isShow">
  <div class="loading" ></div>
</div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  }
}
</script>

<style lang="scss" scoped>
  @keyframes ani{
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
  .mask{
    position: fixed;
    left: 0;
    top:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    .loading{
      width: 50px;
      height: 50px;
      border: 10px solid orange;
      border-radius: 35px;
      border-left-color:transparent;
      animation: ani 1s infinite;
    }
  }
</style>
